<template>
    <div style="height: 100%">
        <el-container style="height: 100%; ">
            <!--      侧边栏 子组件-->
            <el-aside :width="sideWidth + 'px' " style="background-color: rgb(119,160,227);height: 1200px">
                <Aside :is-collapse="isCollapse"></Aside>
            </el-aside>

            <el-container>
                <!--        导航栏 子组件 给子组件传值  -->
                <el-header style="border-bottom: 1px solid #ccc;background-color: aliceblue">
<!--                   icon 在组件内部根据不同状态显示不同的折叠图标-->
<!--        @collapse   在组件内部响应折叠事件         -->
<!--                    用于在头部显示用户相关信息，比如用户名、头像等-->
                    <Header :collapse-icon="collapseIcon"
                            :collapse-title="collapseTitle"
                            @collapse="handleCollapse"
                            :user="user"
                    ></Header>
                </el-header>
                 <!--el-main组件页面的主要内容-->
                <el-main>
<!--              根据当前的路由渲染相应的组件，即页面的实际内容      -->
                    <router-view @refresh="getUser"/>
                </el-main>

            </el-container>

        </el-container>
    </div>
</template>

<script>
    import Aside from "@/components/Aside";
    import Header from "@/components/Header";
    export default {
        name: "Manage",
        data(){
            return{
                sideWidth: 250,
                isCollapse: false,
                collapseIcon: 'el-icon-s-fold',
                //collapseIcon根据不同状态显示不同的折叠图标。
                collapseTitle: '收缩',
                //collapseTitle 根据不同状态显示不同的折叠标题
                user: {},

            }
        },
        components:{
            Aside,
            Header,
        },
        methods:{
            getUser() {
                //获取已登陆的
                let username = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")).username : ""
                if (username) {
                    // 从后台获取User数据
                    this.request.get("/userinfo/" + username).then(res => {
                        // 重新赋值后台的最新User数据 赋值给组件this.user
                        this.user = res.data
                        console.log(this.user.role)
                    })
                }

            },
            //在组件内部响应折叠事件
            handleCollapse() {
                this.isCollapse = !this.isCollapse;
                if(this.isCollapse){  //点击收缩按钮
                    this.sideWidth = 64
                    this.collapseIcon='el-icon-s-unfold'
                    this.collapseTitle = '展开'
                }else{  //点击展开按钮
                    this.sideWidth = 250
                    this.collapseIcon='el-icon-s-fold'
                    this.collapseTitle = '收缩'
                }
            },

        },
        //件会尝试从本地存储中获取用户信息，
        // 并在后台请求用户数据，然后将用户数据赋值给 user 属性
        created() {
            this.getUser();
        },

    }
</script>

<style scoped>
    .el-header {
        background-color: #B3C0D1;
        color: #333;
        line-height: 60px;
    }

    .el-aside {
        color: #333;
    }

</style>